import { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {

  static propTypes = {
    todos: PropTypes.array.isRequired,
    updateTodo: PropTypes.func.isRequired
  }

  render() {
    const { todos, updateTodo, deleteTodo } = this.props

    return (
      <>
        {
          todos.length > 0 ?
          <ul className='todo-main'>
            { todos.map(todo => (<Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}></Item>)) }
          </ul>
          : <div className='todo-empty'>暂无数据</div>
        }
      </>
    )
  }
}